<template>
  <div class="content">
  <!-- 搜索框 -->
    <div class="search_content">
      <div class="row">
        <div class="col">
          <Autocomplete_school_ui></Autocomplete_school_ui>
        </div>
        <div class="col">
          <Select_grade_ui></Select_grade_ui>
        </div>  
        <div class="col">
          <Select_class_ui></Select_class_ui>
        </div>  
        <div class="col">
          <Select_subject_ui></Select_subject_ui>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <Input_test_ui test_label="平均成绩"></Input_test_ui>
        </div>  
        <div class="col">
          <Input_tc_name_ui></Input_tc_name_ui>
        </div>  
        <div class="col">
          <Select_sex_ui></Select_sex_ui>
        </div>  
         <div class="col buttons">
          <el-button type="success" @click="reset" size="medium" >重置</el-button>
          <el-button type="primary" @click="submit" size="medium" >搜索</el-button>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table-content">
      <Table_table_ui>
        <template  slot="buttons">
          <el-button size="mini" type="primary" plain @click="dialogVisible = true">详情</el-button>
        </template>
      </Table_table_ui>
    </div>
    <!-- 分页 -->
    <Pagination_paging_ui getSeach="teacherModule/table_ct_seach"></Pagination_paging_ui>
    <!-- 弹框 -->
    <el-dialog
      title="点击后获取的数据"
      :visible.sync="dialogVisible"
      width="30%"
      @opened = 'opened_dialog()'
      :before-close="handleClose">
      <span>{{dialogVisible_msg}}</span>
    </el-dialog>
  </div>
</template>
<script>

import Input_tc_name_ui from "@/components/ui_search/input_tc_name_ui"; 
import Select_sex_ui from "@/components/ui_search/select_sex_ui";
import Select_class_ui from "@/components/ui_search/select_class_ui";
import Select_grade_ui from "@/components/ui_search/select_grade_ui";
import Autocomplete_school_ui from "@/components/ui_search/autocomplete_school_ui";
import Select_subject_ui from "@/components/ui_search/select_subject_ui";
import Input_test_ui from "@/components/ui_search/input_test_ui";
import Pagination_paging_ui from "@/components/ui_search/pagination_paging_ui";
import Table_table_ui from "@/components/ui_search/table_table_ui";
import {mapActions,mapGetters,mapMutations,mapState} from 'vuex'
import {teacherRes} from '@/static/js/res_data.js'
export default {
  components: {
    Input_tc_name_ui,
    Select_sex_ui,
    Select_class_ui,
    Select_grade_ui,
    Autocomplete_school_ui,
    Select_subject_ui,
    Input_test_ui,
    Pagination_paging_ui,
    Table_table_ui,
  },
  data(){
    return{
      tableLable:[
        {prop:'school',label:'学校'},
        {prop:'grade',label:'年级'},
        {prop:'classes',label:'班级'},
        {prop:'subject',label:'科目'},
        {prop:'test',label:'成绩'},
        {prop:'tc_name',label:'姓名'},
        {prop:'sex',label:'性别'},
      ],
      tableData:[
        {
          school:'',
          grade:'',
          classes:'',
          subject:'',
          test:'',
          tc_name:'',
          sex:''
        }
      ],
      dialogVisible:false,
      dialogVisible_msg:'信息',
      row:"",
    }
  },
  computed: {
    ...mapState({
     getTable_row:state=>state.pubilcModule.table_row
    }),
    //使用vuex的getters
    ...mapGetters({
      table_ct_seach:'teacherModule/table_ct_seach',
      // getTable_row:'pubilcModule/getTable_row'
    })
  },
  watch: {
    tableData(){
      this.setTable_tableData(this.tableData)
    },
  },
  mounted() {
    //表头初始化
    this.setTable_tableLable(this.tableLable);
    this.setTable_show(true);
    //获取值
    this.getData();
  },
  beforeDestroy() {
    this.student_reset();
  },
  methods:{
    ...mapMutations({
      setTable_tableLable:'pubilcModule/setTable_tableLable',
      setTable_tableData:'pubilcModule/setTable_tableData',
      setTable_show:'pubilcModule/setTable_show',
      setPagination_total:'pubilcModule/setPagination_total',
      setPagination_pageNum:'pubilcModule/setPagination_pageNum',
    }),
    ...mapActions({
      student_reset:'teacherModule/reset'
    }),
    //搜索
    submit(){
      //点击搜索初始化
      this.setPagination_pageNum(1);
      console.log(JSON.stringify(this.table_ct_seach))
      this.$notify({
        title:'搜索发送给后端的查询数据！',
        message:JSON.stringify(this.table_ct_seach),
        type:'success'
      });
    },
    //重置
    reset(){
      this.student_reset();
      console.log(JSON.stringify(this.table_ct_seach))
      this.$notify({
        title:'重置发送给后端的查询数据！',
        message:JSON.stringify(this.table_ct_seach),
        type:'success'
      })
    },
    //数据查询获取
    getData(){
      //模仿axiox获取数据后赋值
      if(teacherRes.code == 200){
        this.tableData = teacherRes.data;
        this.setPagination_total(teacherRes.total);
        this.$message.success(teacherRes.msg);
      }
    },
    //弹框-打开弹框后数据
    opened_dialog(){
      this.dialogVisible_msg = `学校：${this.getTable_row.school},年级：${this.getTable_row.grade},班级：${this.getTable_row.classes},
      科目：${this.getTable_row.subject},成绩：${this.getTable_row.test},教师：${this.getTable_row.tc_name},性别：${this.getTable_row.sex},`
    },
    handleClose(done) {
      done();
    }
  }
};
</script>

<style scoped lang="scss">



</style>
